<template>
  <div class="nav">
    <div class="nav-wrapper" v-for="aaa of ThisBuddy">
      <div class="title">{{aaa.title}}</div>
      <div class="bottom">
        <ul v-for="bbb of aaa.dc">
          <li>{{bbb}}</li>
        </ul>
      </div>
    </div>


  </div>
</template>

<script>
  export default {
    name: 'VHeader',
    data () {
      return {
        ThisBuddy:[{
          title:'合作伙伴',
          dc:[
            '平安健康网'
          ,'健康卫士']

        },
          {
            title:'预约保障',
            dc:[
              '用户协议'
              ,'真实评价',
            '隐私声明']

          },
          {
            title:'常见问题',
            dc:[
              '新手指南'
              ,'会员特权说明','优惠劵使用规则',
              'E卡/金卡说明','E卡/金卡使用流程']

          },
          {
            title:'帮助信息',
            dc:[
              '网站地图'
              ,'招贤纳士','品牌招商',
              '纠纷维权']

          },
          {
            title:'关于我们',
            dc:[
              '品牌简介'
              ,'媒体报道','联系我们',
              '我们的团队','版权声明']

          },
        ]
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.nav{
  height: 380px;
  width:80%;
  margin: 0 auto;
  min-width: 80%;

}
  .nav-wrapper{
    width: 16%;

    float:left;
  }
  .title{

    text-align: left;
    line-height: 135px;
    font-size: 20px;
    font-weight: bold;
  }
  ul{
    list-style: none;
    color:rgba(104,104,104);
  }
  li{
    margin-bottom:10px;
  }


</style>
